// demos.html 特定的JavaScript功能

// 导入公共工具
import { TabNavigationManager, PageNavigation } from './utils/navigation.js';
import { debounce, copyCodeToClipboard, ZoomController, CodeHighlightHelper } from './utils/chartUtils.js';
import { initMermaid } from './utils/mermaidConfig.js';

// 全局变量
let currentCategory = null;
let currentDemo = null;
let tabNavManager = null;
let zoomController = null;

// 从chartCategories中构建chartTemplates对象并定义为全局变量
// 同时支持按demo id和图表类型索引
window.chartTemplates = {};
if (typeof chartCategories !== 'undefined') {
  Object.keys(chartCategories).forEach(categoryId => {
    const category = chartCategories[categoryId];
    
    // 添加按图表类型索引的默认模板（使用第一个demo）
    if (category.demos && category.demos.length > 0) {
      window.chartTemplates[categoryId] = category.demos[0];
    }
    
    // 添加按demo id索引的所有模板
    category.demos.forEach(demo => {
      window.chartTemplates[demo.id] = demo;
    });
  });
}

// 加载图表分类
function loadChartCategories() {
    const tabsContainer = document.getElementById('chart-tabs');
    
    if (!tabsContainer || typeof chartCategories === 'undefined') return;
    
    tabsContainer.innerHTML = '';
    
    // 创建分类按钮
    Object.keys(chartCategories).forEach((categoryId, index) => {
        const category = chartCategories[categoryId];
        
        // 创建分类按钮
        const button = document.createElement('button');
        button.className = `tab-btn ${index === 0 ? 'active' : ''}`;
        button.setAttribute('data-chart', categoryId);
        button.innerHTML = category.icon + '<span>' + category.name + '</span>';
        button.onclick = () => selectCategory(categoryId);
        tabsContainer.appendChild(button);
        
        // 默认选择第一个分类
        if (index === 0) {
            currentCategory = categoryId;
        }
    });
    
    // 加载默认分类的案例
    loadCategoryCases(currentCategory);
    
    // 使用TabNavigationManager管理标签导航
    tabNavManager = new TabNavigationManager('tabs-container', 'left-nav-btn', 'right-nav-btn');
    tabNavManager.updateNavButtons();
}

// 更新图表预览
function updateChartPreview(code) {
    // 为全局访问提供当前代码
    window.currentDemoCode = code;
    
    const chartPreview = document.getElementById('chart-preview');
    if (!chartPreview) return;
    
    // 清理之前的内容
    chartPreview.innerHTML = '';
    
    try {
        if (window.mermaid) {
            // 直接使用render函数渲染，避免重复渲染问题
            mermaid.render('mermaidChart_' + Date.now(), code).then(result => {
                // 添加渲染结果
                chartPreview.innerHTML = result.svg;
                console.log('图表渲染成功');
                // 触发图表渲染完成事件
                const event = new CustomEvent('chartRendered', { 
                    detail: { 
                        type: 'mermaid',
                        timestamp: Date.now()
                    } 
                });
                document.dispatchEvent(event);
            }).catch(error => {
                console.error('图表渲染错误:', error);
                chartPreview.innerHTML = `<div class="chart-error">图表渲染失败: ${error.message}</div>`;
            });
        } else {
            chartPreview.innerHTML = '<div class="chart-error">图表库未加载</div>';
        }
    } catch (error) {
        console.error('更新预览错误:', error);
        chartPreview.innerHTML = `<div class="chart-error">更新预览失败: ${error.message}</div>`;
    }
}

// 更新代码高亮
function updateCodeHighlight(code) {
    const codeHighlight = document.querySelector('.code-highlight code');
    if (codeHighlight) {
        codeHighlight.textContent = code;
        // 使用Prism.js进行代码高亮
        if (window.Prism) {
            Prism.highlightElement(codeHighlight);
        } else if (window.hljs) {
            // 降级使用highlight.js
            hljs.highlightElement(codeHighlight);
        }
    }
}

// 选择分类
function selectCategory(categoryId) {
    if (typeof chartCategories === 'undefined' || !chartCategories[categoryId]) return;
    
    // 更新按钮状态
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.getAttribute('data-chart') === categoryId) {
            btn.classList.add('active');
        }
    });
    
    // 更新当前分类
    currentCategory = categoryId;
    
    // 加载该分类的案例
    loadCategoryCases(categoryId);
}

// 加载分类案例
function loadCategoryCases(categoryId) {
    const casesContainer = document.getElementById('cases-container');
    
    if (!casesContainer || typeof chartCategories === 'undefined' || !chartCategories[categoryId]) return;
    
    const category = chartCategories[categoryId];
    
    casesContainer.innerHTML = '';
    
    if (!category.demos || category.demos.length === 0) {
        casesContainer.innerHTML = `
            <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #666;">
                <h3>暂无案例数据</h3>
                <p>该分类的案例正在建设中...</p>
            </div>
        `;
        return;
    }
    
    // 创建案例卡片
    category.demos.forEach((demo, index) => {
        const card = document.createElement('div');
        card.className = `case-card ${index === 0 ? 'active' : ''}`;
        card.setAttribute('data-demo-id', demo.id);
        card.innerHTML = `
            <div class="case-header">
                <h3 class="case-title">${demo.title}</h3>
                <button class="quick-preview-btn" title="快速预览">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <polyline points="10 8 16 12 10 16 10 8"></polyline>
                    </svg>
                </button>
            </div>
            <div class="case-content">
                <p class="case-description">${demo.description}</p>
            </div>
        `;
        
        // 添加快速预览按钮事件
        const previewBtn = card.querySelector('.quick-preview-btn');
        previewBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // 防止触发卡片点击事件
            selectDemo(demo);
        });
        
        card.addEventListener('click', () => selectDemo(demo));
        casesContainer.appendChild(card);
        
        // 默认选择第一个案例
        if (index === 0) {
            currentDemo = demo;
            updateChartDisplay(demo);
        }
    });
}

// 选择案例
function selectDemo(demo) {
    if (!demo) return;
    
    // 更新卡片状态
    document.querySelectorAll('.case-card').forEach(card => {
        card.classList.remove('active');
        if (card.getAttribute('data-demo-id') === demo.id) {
            card.classList.add('active');
        }
    });
    
    // 更新当前案例
    currentDemo = demo;
    
    // 更新图表显示
    updateChartDisplay(demo);
    
    // 滚动到图表显示区域
    const chartDisplay = document.getElementById('chart-display-container');
    if (chartDisplay) {
        PageNavigation.scrollToElement(chartDisplay, { 
            behavior: 'smooth', 
            block: 'start' 
        });
    }
}

// 更新图表显示
function updateChartDisplay(demo) {
    if (!demo) return;
    
    const codeDisplay = document.getElementById('code-display');
    if (!codeDisplay) return;
    
    // 更新代码显示
    codeDisplay.value = demo.code;
    codeDisplay.classList.add('mermaid-code');
    
    // 更新代码高亮
    updateCodeHighlight(demo.code);
    
    // 更新图表预览
    updateChartPreview(demo.code);
}

// 封装复制代码功能
function copyDemoCode() {
    if (!currentDemo) return;
    
    const copyBtn = document.getElementById('copy-btn');
    copyCodeToClipboard(currentDemo.code, copyBtn);
}

// 在编辑器中打开 - 现在通过全局函数处理
function openInEditor() {
    if (!currentDemo) return;
    
    // 检查是否存在全局的打开编辑器函数
    if (window.openEditorWithCode) {
        window.openEditorWithCode(currentDemo.code);
    } else {
        // 降级方案：使用PageNavigation跳转到主页面
        PageNavigation.goToHomeWithParams({ demo: currentDemo.id });
    }
}

// 更新loadCategoryCases函数以使用TabNavigationManager
const originalLoadCategoryCases = loadCategoryCases;
loadCategoryCases = function(categoryId) {
    originalLoadCategoryCases(categoryId);
    setTimeout(() => {
        if (tabNavManager) {
            tabNavManager.updateNavButtons();
        }
    }, 200); // 等待DOM更新后再检查
};

// 缩放功能
function setupZoomControls() {
    const chartPreview = document.getElementById('chart-preview');
    const codeDisplay = document.getElementById('code-display');
    
    // 初始化缩放控制器
    zoomController = new ZoomController('preview-panel', 'chart-preview', 'zoom-in-btn', 'zoom-out-btn', 'reset-zoom-btn', 'close-btn');
    
    // 代码变化时更新预览
    if (codeDisplay) {
        codeDisplay.addEventListener('input', debounce(() => {
            updateChartPreview(codeDisplay.value);
        }, 300));
    }
    
    // 关闭按钮事件
    const closeBtn = document.getElementById('close-btn');
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            // 滚动回案例列表
            const casesContainer = document.getElementById('cases-container');
            if (casesContainer) {
                PageNavigation.scrollToElement(casesContainer, { 
                    behavior: 'smooth', 
                    block: 'start' 
                });
            }
        });
    }
}

// 初始化代码高亮
function initCodeHighlight() {
    const codeHighlight = document.querySelector('.code-highlight code');
    if (codeHighlight && window.Prism) {
        codeHighlight.classList.add('language-mermaid');
    }
}

// 页面初始化
function initDemosPage() {
    // 加载图表分类
    loadChartCategories();
    
    // 设置按钮事件
    document.getElementById('copy-btn')?.addEventListener('click', copyDemoCode);
    document.getElementById('edit-btn')?.addEventListener('click', openInEditor);
    
    // 设置缩放控制
    setupZoomControls();
    
    // 初始化代码高亮
    initCodeHighlight();
    
    // 使用PageNavigation优化页面滚动
    PageNavigation.setupAnchorSmoothScroll();
}

// 当DOM加载完成后初始化页面
document.addEventListener('DOMContentLoaded', () => {
    // Mermaid配置已通过统一的initMermaid函数处理
    initMermaid({
      startOnLoad: false,
      securityLevel: 'loose'
    });
    console.log('Mermaid已初始化');
    
    // 确保数据已加载
    if (typeof chartCategories === 'undefined') {
        console.warn('图表数据未加载，尝试重新加载...');
        // 可以添加重试逻辑
    } else {
        // 初始化页面功能
        initDemosPage();
    }
    
    // 初始化代码高亮
    if (typeof hljs !== 'undefined') {
        hljs.highlightAll();
    }
    
    // 监听图表渲染完成事件，进行后续处理
    document.addEventListener('chartRendered', (event) => {
        console.log('图表渲染完成', event.detail);
        // 可以在这里添加渲染完成后的处理逻辑
    });
});